// 全局通用样式

// 颜色变量
$primary-color: #4CAF50;
$secondary-color: #2196F3;
$success-color: #4CAF50;
$warning-color: #FF9800;
$error-color: #f44336;
$info-color: #2196F3;

$text-primary: #2c3e50;
$text-secondary: #7f8c8d;
$text-muted: #bdc3c7;

$background-primary: #ffffff;
$background-secondary: #f8f9fa;
$background-muted: #ecf0f1;

$border-color: #e0e0e0;
$shadow-light: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
$shadow-medium: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
$shadow-heavy: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);

// 圆角变量
$border-radius-sm: 8rpx;
$border-radius-md: 12rpx;
$border-radius-lg: 16rpx;
$border-radius-xl: 20rpx;

// 间距变量
$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 40rpx;
$spacing-xxl: 48rpx;

// 字体大小
$font-size-xs: 20rpx;
$font-size-sm: 24rpx;
$font-size-md: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;
$font-size-xxl: 40rpx;
$font-size-title: 48rpx;

// 通用工具类
.text-primary {
  color: $text-primary !important;
}

.text-secondary {
  color: $text-secondary !important;
}

.text-muted {
  color: $text-muted !important;
}

.text-success {
  color: $success-color !important;
}

.text-error {
  color: $error-color !important;
}

.text-warning {
  color: $warning-color !important;
}

.text-center {
  text-align: center !important;
}

.text-left {
  text-align: left !important;
}

.text-right {
  text-align: right !important;
}

// 背景色
.bg-primary {
  background-color: $background-primary !important;
}

.bg-secondary {
  background-color: $background-secondary !important;
}

.bg-success {
  background-color: rgba($success-color, 0.1) !important;
}

.bg-error {
  background-color: rgba($error-color, 0.1) !important;
}

// 边距
.m-xs { margin: $spacing-xs !important; }
.m-sm { margin: $spacing-sm !important; }
.m-md { margin: $spacing-md !important; }
.m-lg { margin: $spacing-lg !important; }
.m-xl { margin: $spacing-xl !important; }

.mt-xs { margin-top: $spacing-xs !important; }
.mt-sm { margin-top: $spacing-sm !important; }
.mt-md { margin-top: $spacing-md !important; }
.mt-lg { margin-top: $spacing-lg !important; }
.mt-xl { margin-top: $spacing-xl !important; }

.mb-xs { margin-bottom: $spacing-xs !important; }
.mb-sm { margin-bottom: $spacing-sm !important; }
.mb-md { margin-bottom: $spacing-md !important; }
.mb-lg { margin-bottom: $spacing-lg !important; }
.mb-xl { margin-bottom: $spacing-xl !important; }

.ml-xs { margin-left: $spacing-xs !important; }
.ml-sm { margin-left: $spacing-sm !important; }
.ml-md { margin-left: $spacing-md !important; }
.ml-lg { margin-left: $spacing-lg !important; }
.ml-xl { margin-left: $spacing-xl !important; }

.mr-xs { margin-right: $spacing-xs !important; }
.mr-sm { margin-right: $spacing-sm !important; }
.mr-md { margin-right: $spacing-md !important; }
.mr-lg { margin-right: $spacing-lg !important; }
.mr-xl { margin-right: $spacing-xl !important; }

// 内边距
.p-xs { padding: $spacing-xs !important; }
.p-sm { padding: $spacing-sm !important; }
.p-md { padding: $spacing-md !important; }
.p-lg { padding: $spacing-lg !important; }
.p-xl { padding: $spacing-xl !important; }

.pt-xs { padding-top: $spacing-xs !important; }
.pt-sm { padding-top: $spacing-sm !important; }
.pt-md { padding-top: $spacing-md !important; }
.pt-lg { padding-top: $spacing-lg !important; }
.pt-xl { padding-top: $spacing-xl !important; }

.pb-xs { padding-bottom: $spacing-xs !important; }
.pb-sm { padding-bottom: $spacing-sm !important; }
.pb-md { padding-bottom: $spacing-md !important; }
.pb-lg { padding-bottom: $spacing-lg !important; }
.pb-xl { padding-bottom: $spacing-xl !important; }

.pl-xs { padding-left: $spacing-xs !important; }
.pl-sm { padding-left: $spacing-sm !important; }
.pl-md { padding-left: $spacing-md !important; }
.pl-lg { padding-left: $spacing-lg !important; }
.pl-xl { padding-left: $spacing-xl !important; }

.pr-xs { padding-right: $spacing-xs !important; }
.pr-sm { padding-right: $spacing-sm !important; }
.pr-md { padding-right: $spacing-md !important; }
.pr-lg { padding-right: $spacing-lg !important; }
.pr-xl { padding-right: $spacing-xl !important; }

// 圆角
.rounded-sm { border-radius: $border-radius-sm !important; }
.rounded-md { border-radius: $border-radius-md !important; }
.rounded-lg { border-radius: $border-radius-lg !important; }
.rounded-xl { border-radius: $border-radius-xl !important; }

// 阴影
.shadow-sm {
  box-shadow: $shadow-light !important;
}

.shadow-md {
  box-shadow: $shadow-medium !important;
}

.shadow-lg {
  box-shadow: $shadow-heavy !important;
}

// 弹性布局
.flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.justify-start {
  justify-content: flex-start !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-end {
  justify-content: flex-end !important;
}

.justify-between {
  justify-content: space-between !important;
}

.justify-around {
  justify-content: space-around !important;
}

.align-start {
  align-items: flex-start !important;
}

.align-center {
  align-items: center !important;
}

.align-end {
  align-items: flex-end !important;
}

.flex-1 {
  flex: 1 !important;
}

// 动画
.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}